<template>
  <view class="thesis-detail-page">
    <!-- 顶部蓝色头部 -->
    <view class="header-section">
      <view class="header-content">
        <text class="thesis-title">2025年中国私域电商行业趋势白皮书</text>
        <text class="thesis-price">5000-12000/份</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <view class="content-card">
        <!-- 发布信息 -->
        <view class="publication-info">
          <view class="info-item">
            <text class="label">发布时间:</text>
            <text class="value">2008年1月1日 09:00</text>
          </view>
          <view class="info-item">
            <text class="label">相关要求:</text>
            <text class="value">要求好</text>
          </view>
        </view>

        <!-- 论文详情标题 -->
        <text class="section-title">论文详情</text>

        <!-- 招聘提示 -->
        <view class="recruitment-notice">
          <text class="notice-title">招聘提示:</text>
          <view class="notice-content">
            <text class="notice-text">收取培训费、贷款培训,或在录用过程中需支付体检、服装、押金等费用、鼓吹出国出境务工短期内可获得丰厚报酬等都属违法行为,请求职者提高警惕,谨防上当受骗,如遇类似情况,请立即举报。校园招聘违规举报</text>
            <text class="notice-text">本白皮书深入分析了2025年中国私域电商行业的发展趋势，涵盖了用户行为变化、技术驱动因素、商业模式创新等多个维度。通过大量数据分析和案例研究，为行业从业者提供前瞻性的洞察和实用的指导建议。</text>
            <text class="notice-text">主要内容包括：</text>
            <view class="notice-list">
              <text class="list-item">• 私域电商市场规模与增长预测</text>
              <text class="list-item">• 用户消费习惯的演变趋势</text>
              <text class="list-item">• 新兴技术对行业的影响</text>
              <text class="list-item">• 成功案例分析</text>
              <text class="list-item">• 未来发展方向建议</text>
            </view>
          </view>
        </view>

        <!-- 论文摘要 -->
        <view class="thesis-abstract">
          <text class="section-title">论文摘要</text>
          <view class="abstract-content">
            <text class="abstract-text">随着互联网技术的快速发展和消费者行为的变化，私域电商已成为电商行业的重要发展方向。本白皮书通过深入的市场调研和数据分析，全面梳理了2025年中国私域电商行业的发展现状、面临的挑战以及未来的发展趋势。</text>
            <text class="abstract-text">研究发现，私域电商在提升用户粘性、降低获客成本、提高转化率等方面具有显著优势。同时，随着人工智能、大数据等技术的应用，私域电商的运营效率和用户体验将得到进一步提升。</text>
          </view>
        </view>

        <!-- 研究背景 -->
        <view class="research-background">
          <text class="section-title">研究背景</text>
          <view class="background-content">
            <text class="background-text">在用户增量见顶、获客成本高涨的背景之下，私域电商行业迎来了快速发展。通过构建私域流量池，企业能够更好地触达和服务用户，实现精准营销和个性化推荐。</text>
            <text class="background-text">本研究的目的是为行业从业者提供全面的市场洞察和实用的发展建议，帮助企业在激烈的市场竞争中保持优势地位。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="collect-btn" @click="toggleCollect">
        <text class="iconfont-v2" :class="['heart-icon', isCollected ? 'icon-shoucang1 filled' : 'icon-shoucang1']"></text>
        <text class="collect-text">收藏</text>
      </view>
      <button class="consult-btn" @click="consultNow">
        <text>立即咨询</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      isCollected: false
    }
  },
  methods: {
    toggleExpanded() {
      this.isExpanded = !this.isExpanded;
    },
    toggleCollect() {
      this.isCollected = !this.isCollected;
      const message = this.isCollected ? '已收藏' : '已取消收藏';
      uni.showToast({
        title: message,
        icon: 'success'
      });
    },
    consultNow() {
      uni.showToast({
        title: '正在为您联系咨询，请稍候...',
        icon: 'none'
      });
      // 这里可以添加咨询逻辑
      setTimeout(() => {
        uni.showModal({
          title: '咨询联系',
          content: '我们的客服将在24小时内与您联系，请保持手机畅通。',
          success: (res) => {
            if (res.confirm) {
              console.log('用户确认咨询');
            }
          }
        });
      }, 1500);
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

.header-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
  color: white;

  .header-content {
    .thesis-title {
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
      display: block;
      line-height: 1.4;
    }

    .thesis-price {
      font-size: 32rpx;
      font-weight: 500;
      opacity: 0.9;
      display: block;
    }
  }
}

.main-content {
  padding: 20rpx;

  .content-card {
    background: white;
    border-radius: 24rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

    .publication-info {
      margin-bottom: 40rpx;

      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .label {
          font-size: 28rpx;
          color: #666;
          margin-right: 16rpx;
        }

        .value {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
      display: block;
    }

    .recruitment-notice {
      margin-bottom: 40rpx;
      padding: 30rpx;
      background: #fff9e6;
      border-radius: 16rpx;
      border-left: 8rpx solid #ffc107;

      .notice-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }

      .notice-content {
        .notice-text {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
          margin-bottom: 16rpx;
          display: block;
        }

        .notice-list {
          margin-top: 16rpx;

          .list-item {
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
            margin-bottom: 8rpx;
            display: block;
            padding-left: 16rpx;
          }
        }
      }
    }

    .thesis-abstract {
      margin-bottom: 40rpx;

      .abstract-content {
        .abstract-text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          margin-bottom: 20rpx;
          display: block;
        }
      }
    }

    .research-background {
      .background-content {
        .background-text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          margin-bottom: 20rpx;
          display: block;
        }
      }
    }
  }
}

.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 40rpx;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 20rpx;

  .collect-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    .heart-icon {
      font-size: 32rpx;
      color: #ccc;
      transition: all 0.3s ease;

      &.filled {
        color: #ED6567;
      }
    }

    .collect-text {
      font-size: 24rpx;
      color: #666;
    }

    &:hover .heart-icon {
      color: #ED6567;
    }
  }

  .consult-btn {
    flex: 1;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #d55a54;
    }

    text {
      color: white;
    }
  }
}
</style>